<template>
  <div class="app-container">
    <el-row class="search-container">
      <el-col>
        <el-form ref="QueryRef" :model="queryParams" :inline="true">
          <el-form-item label="关键字" prop="keywords">
            <el-input v-model="queryParams.keywords" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-input v-model="queryParams.status" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-card>
          <el-table
            :data="tableData"
            row-key="id"
            border
            lazy
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="sort" label="顺序" />
            <el-table-column label="状态">
              <template #default="scope">
                <el-tag v-if="scope.row.status === 1">正常</el-tag>
                <el-tag v-else>禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  size="small"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
defineOptions({
  name: "Dept",
  inheritAttrs: false,
});

const tableData = ref([]);
const QueryRef = ref();
const queryParams = reactive({
  keywords: "",
  status: "",
});
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
const handleEdit = (index, row) => {
  console.log(index, row);
};
const handleDelete = (index, row) => {
  console.log(index, row);
};
const handleQuery = () => {
  const keywords = queryParams.keywords;
  const status = queryParams.status;
};
const resetQuery = () => {
  QueryRef.value.resetFields();
};
onMounted(() => {
  handleQuery();
});
</script>
<style scoped></style>
